<template>
  <div class="FootContainer">
    <div class="listItem" v-for="item in list" :key="item.title">
      <router-link :to="item.link">
        <Icon :type="item.ClassName"></Icon>
        <span>{{ item.title }}</span>
      </router-link>
    </div>
  </div>
</template>

<script>
import Icon from "@/components/Icon.vue";
export default {
  components: {
    Icon,
  },
  data() {
    return {
      list: [
        {
          title: "首页",
          ClassName: "icon-shouye",
          link: "/home",
        },
        {
          title: "查大学",
          ClassName: "icon-sousuo2",
          link: "/school",
        },
        {
          title: "志愿表",
          ClassName: "icon-List",
          link: "/volunteer",
        },
        // {
        //   title: "个人",
        //   ClassName: "icon-geren",
        // },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
@import "//at.alicdn.com/t/c/font_4280689_l2cs5cjx7v.css";
.FootContainer {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 5px 0;
  height: 50px;
}
.listItem {
  // span {

  // }
  a {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    font-size: 20px;
    span {
      font-size: 12px;
    }
  }
}
</style>